<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html>
  <head>
        
    <title>
    	touch
	</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="${HOME }/common/client/css/jquery.mobile-1.0.min.css" />
		<style type="text/css">

		.th_header{
			size : 1;
		}	
	
		#collapse{
			border-style: none;
			border-spacing:10px;
			border-width : 1px;
		}
		#dashed{
			border-style: dashed;
			border-spacing:10px;
			border-width : 1px;
			padding-bottom: 15px; 
			padding-left: 15px; 
			padding-top: 15px;
			width: 400px;
			height: 95%;
			text-align:center;
		}
		#menu_main_table{
			width:90%;
			border-style:inset;
			border-width:5px;
			text-align:center;
			vertical-align: center;
		}
		#menu_main_table td{
			position:relative;
			width:50px;
		}
		.div_main_cell{
			position: relative;
			border: solid 1px;
			-moz-border-radius: 15px;
			border-radius : 15px;
			width:40px;
			height:40px;
			text-align:center;
		}
		.valign{
			height:80px;
			text-align:center;		
			vertical-align:center;
		}
		
		
	</style>
	
	
	
	<script type="text/javascript" src="${HOME }/common/client/js/jquery-1.6.4.min.js"></script>
	<script src="${HOME }/common/client/js/jquery.mobile-1.0.1.min.js"></script>
	
	<script>
    
	function buy_in_bag(store_id ,code_cate , code_detail, item_seq, item_price){	
		if(!localStorage){
			alert('현재 기기에서는 해당 기능을 수행하지 못합니다. 스마트폰 또는 크롬,파이어폭스와 같은 html5 지원되는 환경에서 이용해주세요');
			return false;
		}else{
		
		var idx = parseInt($('#quantity_'+code_cate+code_detail+ item_seq).val());
		
		
		$('#quantity_'+code_cate+code_detail+ item_seq).val('0');
		
		//localStorage.clear();
		
		if(localStorage.getItem(store_id + '/' +code_cate + '/' + code_detail + '/' + item_seq) != null){
			localStorage.setItem(store_id + '/' +code_cate + '/' + code_detail + '/' + item_seq, 
				parseInt(localStorage.getItem(store_id + '/' +code_cate + '/' + code_detail + '/' + item_seq)) 
				+idx
			);
		}else{
			localStorage.setItem(store_id + '/' +code_cate + '/' + code_detail + '/' + item_seq,  idx);
		}
		
		
		
		
		if(localStorage['total_price'] != null && localStorage['total_price'] != '' && localStorage['total_price'] != 'NaN'){
			localStorage.setItem('total_price', parseInt(localStorage['total_price']) +  (idx * parseInt(item_price)));			
		}else{
			localStorage.setItem('total_price', idx * parseInt(item_price));
		}
		
		
		
		$('#total_price_area').html('금액 : ' + (localStorage['total_price']));
		
		}
	}


	
	</script>
    
   
    
  </head>
  <body>
  	<section data-role="page" id="item_check_request" data-fullscreen="false">
  		<jsp:include page="/common/server/header.jsp" >
  			<jsp:param value='<%=java.net.URLEncoder.encode("상품보기") %>' name="header_nm"/>
  		</jsp:include>
  		<div class="contents" data-role="content" style="position:relative;">
  			<form name="login" method="post" action='<c:out value="${pageContext.request.contextPath }"/>/index.html'>
		  			<div style=" background-color: #FFFFFF; height:100%; width:100%; margin-top :5px; position:relative;">
		  				<div id="dashed">
		  						<table style="border:0px solid; width:90%;border-collapse:collapse; border: 1px solid;">
		  							<colgroup>
		  								<col width="10%">
		  								<col width="20%">
		  								<col width="10%">
		  								<col width="10%">
		  								<col width="10%">
		  								<col width="20%">
		  								<col width="20%">
		  							</colgroup>
<!-- 		  							<tr> -->
<!-- 		  								<th>이미지</th> -->
<!-- 		  								<th>상품명</th> -->
<!-- 		  								<th>가격</th> -->
<!-- 		  								<th>수량</th> -->
<!-- 		  								<th>주문수량</th> -->
<!-- 		  								<th colspan="2">이용메뉴</th> -->
<!-- 		  							</tr> -->
			  						<c:forEach items="${list}" var="item">
			  								<tr>
			  									<td rowspan="2">
			  										<img name="item_img" src="${IMG}/items/${item.item_img}" class="ui-li-thumb" style="position:relative;"/>
			  									</td>
		  										<td>
		  											<h3>${item.item_nm }</h3>
		  										</td>
		  										<td>
		  											${item.item_price }
		  										</td>
		  										<td>
		  											${item.item_quantity }
		  										</td>
		  										<td>
		  											<input type="number"  id="quantity_${item.code_cate }${item.code_detail}${item.item_seq }" name="quantity_text" style="width:20px;" value="0" size="1">
		  										</td>
		  										<td rowspan="2">
		  											<font size="1">
		  											<a href="javascript:;" onclick="buy_in_bag('${item.store_id }', '${item.code_cate }' , '${item.code_detail }' ,'${item.item_seq }', '${item.item_price }' );"  style="cursor:pointer;">장바구니에담기</a>
		  											</font>
		  										</td>
		  										<td rowspan="2">
		  											<font size="1"><a href="${item.item_seq }">상세보기</a></font>
		  										</td>
<!-- 			  									<td> -->
<%-- 													<input type="button" style="width:100px;" id="${item.item_seq }" value="구입하기"  data-inline="true" size="1"/> --%>
<!-- 			  									</td> -->
<!-- 			  									<td> -->
<%-- 			  										<input type="button" id="detail_${item.item_seq }" value="상세보기"  size="1"/> --%>
<!-- 			  									</td> -->
			  								</tr>
			  								<tr>
			  									<td colspan="4"><font size="1">${item.item_sub_title }</font></td>
			  								</tr>
										</c:forEach>
									</table>
						</div>
					</div>
  			</form>
  		</div>
  		
		<jsp:include page="/common/server/footer.jsp"></jsp:include>  		
		
		
		
		 
		
		
    </section>
    
    
   <script>
$('div[name=bag_anchor]').click(function(){
	
//         function push_to_bag(store_id ,code_cate , code_detail, item_seq, item_price){	
//	javascript:push_to_bag('${item.store_id }','${item.code_cate }', '${item.code_detail}', '${item.item_seq }', '${item.item_price }');
//$(this).attr('data-1')
//data-1="${item.store_id }" data-2="${item.code_cate }" 
//data-3="${item.code_detail }" data-4="${item.item_seq }" data-5="${item.item_price }
	if(!localStorage){
		alert('현재 기기에서는 해당 기능을 수행하지 못합니다. 스마트폰 또는 크롬,파이어폭스와 같은 html5 지원되는 환경에서 이용해주세요');
		return false;
	}else{
	
		var store_id =  $(this).attr('data-1');
		var code_cate = $(this).attr('data-2');
		var code_detail = $(this).attr('data-3');
		var item_seq =  $(this).attr('data-4');
		var item_price = $(this).attr('data-5');
		
		var idx = parseInt($('#quantity_'+code_cate+code_detail+ item_seq).val());
		
		$('#quantity_'+code_cate+code_detail+ item_seq).val('0');
		
		//localStorage.clear();
		
		if(localStorage.getItem(store_id + '/' +code_cate + '/' + code_detail + '/' + item_seq) != null){
			localStorage.setItem(store_id + '/' +code_cate + '/' + code_detail + '/' + item_seq, 
				parseInt(localStorage.getItem(store_id + '/' +code_cate + '/' + code_detail + '/' + item_seq)) 
				+idx
			);
		}else{
			localStorage.setItem(store_id + '/' +code_cate + '/' + code_detail + '/' + item_seq,  idx);
		}
		
		if(localStorage['total_price'] != null && localStorage['total_price'] != '' && localStorage['total_price'] != 'NaN'){
			localStorage.setItem('total_price', parseInt(localStorage['total_price']) +  (idx * parseInt(item_price)));			
		}else{
			localStorage.setItem('total_price', idx * parseInt(item_price));
		}
		
		$('#total_price_area').html('금액 : ' + (localStorage['total_price']));
	}
});   	
   </script>
		
    
  </body>
</html>